<template>
    <el-dialog v-model="visible" :title="title" :width="width" :before-close="handleBeforeClose"
        :close-on-click-modal="closeOnClickModal" :show-close="showClose" :append-to-body="appendToBody">
        <el-scrollbar :max-height="maxHeight">
            <slot></slot>
        </el-scrollbar>
        <template #footer>
            <slot name="footer">
                <div class="btn">
                    <el-button @click="handleCancel">取消</el-button>
                    <el-button type="primary" @click="handleConfirm">确认</el-button>
                </div>
            </slot>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: '提示',
    },
    width: {
        type: String,
        default: '50%',
    },
    maxHeight: {
        type: String,
        default: '400px', // 默认最大高度
    },
    closeOnClickModal: {
        type: Boolean,
        default: false,
    },
    showClose: {
        type: Boolean,
        default: true,
    },
    appendToBody: {
        type: Boolean,
        default: false,
    },
});

const emit = defineEmits(['update:modelValue', 'confirm', 'cancel', 'close']);

const visible = ref(props.modelValue);

watch(
    () => props.modelValue,
    (newVal) => {
        visible.value = newVal;
    },
);

watch(visible, (newVal) => {
    emit('update:modelValue', newVal);
});

const handleConfirm = () => {
    emit('confirm');
    visible.value = false;
};

const handleCancel = () => {
    emit('cancel');
    visible.value = false;
};

const handleBeforeClose = (done) => {
    emit('close');
    done();
};
</script>
<style>
.btn{
    display: flex;
    justify-content: center;
}
</style>